<template>
	<view>
		<view  :class="{'filter-50':addShow}">
			<u-navbar :border-bottom="false" title-color="#292940" title="创作" :custom-back="goBack"></u-navbar>
			<view>
				<scroll-view class="" :scroll-left="scrollLeft" @scrolltolower="end" lower-threshold="10"  style="width: 100%; white-space: nowrap" scroll-x="true"
					@scroll="scroll">
					<view class="creation-list d-flex align-items-center">
						<view @click="popAddAlbumShow = true,albumName=''">
							<view class="creation-title-list d-flex align-items-center">
								<view class="text-BD40EC fz-52 mr-1 line-h-1em">+</view>
								<view class="fz-28 text-343A40">添加专辑</view>
							</view>
						</view>
						<view v-for="(item,index) in albumList">
							<template v-if="index < 5">
								<view @tap="toAlbum(item)" class="creation-title-list d-flex justify-content-between align-items-center">
									<view class="creation-lable">
										<image src="/static/creation/icon-album.png"></image>
									</view>
									<view class="creation-name fz-28 text-343A40">{{item.name}}</view>
									<view class="arrow-right">
										<image src="/static/creation/arrow-right.png"></image>
									</view>
								</view>
							</template>
						</view>
						<view v-if="albumList.length > 5">
							<view class="all-box d-flex align-items-center" :class="{'paddingL':isLeft }" @tap="toAll">
								<view class="all-icon">
									<image src="/static/creation/all-icon.png"></image>
								</view>
								<view class="all-text fz-22 text-343A40">全部专辑</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view>
				<view class="padding-wrap draft-title  d-flex justify-content-between align-items-center">
					<view class="d-flex align-items-center">
						<view class="text-292940 fz-32 family-DIN font-weight-600">草稿箱</view>
						<view class="text-ADB5BD fz-26 ml-1">{{draftList.length}}</view>
					</view>
					<view class="d-flex justify-content-end align-items-center" @tap="toDraft">
						<span class="fz-26 text-999BA8 pr-1">查看更多</span>
						<view class="more-arrow">
							<image src="/static/mine/wallet-more.png"></image>
						</view>
					</view>
				</view>
				<scroll-view lower-threshold="10"  style="width: 100%; white-space: nowrap" scroll-x="true">
					<view class="draft-list d-flex align-items-center">
						<view class="draft-add" @tap="addShow = true">
							<view style="width: 246upx;height: 246upx;">
								<view class="draft-create">
									<image class="" src="/static/creation/icon-create.png"></image>
								</view>
								<view class="text-999BA8 text-center fz-24">创作作品</view>
							</view>
						</view>
						<view v-for="item in draftList">
							<view class="draft-img" @click="toUpdateWorks(item)">
								<image :src="item.cover" mode="aspectFill" v-if="item.type != 1"></image>
								<image :src="item.file" mode="aspectFill" v-else></image>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="padding-wrap draft-title  d-flex justify-content-between align-items-center">
					<view class="d-flex align-items-center">
						<view class="text-292940 fz-32 family-DIN font-weight-600">已鑄造</view>
						<view class="text-ADB5BD fz-26 ml-1">{{total}}</view>
					</view>
					<view class="filter-icon" @click="popShow = true">
						<image src="/static/market/filter-def-big.png" v-if="keyword === ''"></image>
						<image src="/static/market/filter-sel-big.png" v-else></image>
					</view>
				</view>
				<view class="padding-wrap creation-box d-flex justify-content-between">
					<view class="creation-item" v-for="item in castList" @click="toDetail(item)">
						<view class="position-relative">
							<view class="creation-cover">
								<image :src="item.cover" mode="aspectFill" v-if="item.type != 1"></image>
								<image :src="item.file" mode="aspectFill" v-else></image>
							</view>
							<view class="position-absolute d-flex align-items-center creation-quantity font-DIN text-1EF7FE fz-24">{{item.count}}</view>
						</view>
						<view class="creation-item-title text-292940 fz-26">{{item.name}}</view>
					</view>
				</view>
				<u-loadmore :status="status" v-show="moreShow" margin-top="50" class="pb-4"/>
				<view class="no-works" v-show="total === 0 && !moreShow && searchKeyword === ''">
					<image src="/static/market/no-works.png" mode="aspectFill"></image>
					<view style="color: #b5b5b5;">空空如也~</view>
				</view>
				<view class="no-works" v-show="total === 0 && !moreShow && searchKeyword !== ''">
					<image src="/static/market/no-data.png" mode="aspectFill"></image>
					<view style="color: #b5b5b5;">搜索无结果</view>
				</view>
			</view>
		</view>
		<u-popup v-model="popShow" mode="center" border-radius="16" closeable @close="popClose">
			<view class="scr-main">
				<u-search class="mt-4" height="70" clearabled placeholder="搜索作品" :show-action="false" v-model="keyword"></u-search>
				<view class="ipt-box">
				</view>
				<view class="ipt-box">
					<u-button type="button" throttle-time="0" class="ipt-btn" @tap="reSet">重置</u-button>
					<u-button type="button" class="ipt-btn search" @tap="popClose(1)">搜索
					</u-button>
				</view>
			</view>
		</u-popup>
		<u-popup v-model="popAddAlbumShow" mode="center" border-radius="16" closeable>
			<view class="album-box">
				<view class="title">
					添加专辑
				</view>
				<view class="item">
					<label class="text-36363A fz-32">专辑名称</label>
					<u-input v-model.trim="albumName" :custom-style="customStyle" height="80" border="bottom" class="input-box" clearable label-width="0" placeholder="请输入系列名称"
						placeholder-style="color:#CCCDD5;" :border="false" clear-size="36">
					</u-input>
				</view>
				<u-button class="add-btn" :loading="addLoaing" hover-class="none" @click="addAlbum">添加</u-button>
			</view>
		</u-popup>
		<u-popup v-model="addShow" mode="bottom" :mask-custom-style="maskObj">
			<view class="add-work" @click="addShow = false">
				<view class="up-img" @click="toCreation">
					<text>上传图片</text>
				</view>
				<view class="up-audio" @click="toCreationAudio">
					<text>上传音乐</text>
				</view>
				<view class="up-video" @click="toCreationVideo">
					<text>上传视频</text>
				</view>
				<image :class="{'run-img':addShow}" src="/static/creation/up-close.png" mode="aspectFill" @click="addShow = false"></image>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				addLoaing:false,
				scrollLeft: 0,
				isLeft:false,
				old_left:0,
				popShow:false,
				popAddAlbumShow:false,
				page:1,
				total:'',
				keyword:'',
				searchKeyword:'',
				status:'loading',
				moreShow:false,
				albumName:'',//系列名称
				customStyle:{fontSize:'32upx'},
				maskObj:{background: 'rgba(255, 255, 255, 0.8)'},
				addShow:false
			}
		},
		onLoad() {
			//获取专辑列表
			this.getAlbumList()
			//获取铸造列表
			this.getCastList()
			//获取草稿类别
			this.getDraftList()
		},
		computed:{
			//系列列表
			albumList(){
				return this.$store.state.user.albumList
			},
			//草稿箱列表
			draftList(){
				return this.$store.state.works.draftList
			},
			//铸造列表
			castList(){
				return this.$store.state.works.castList
			}
		},
		onPullDownRefresh() {
			//获取专辑列表
			this.$store.commit('user/SET_ALBUMLIST',[])
			this.getAlbumList()
			this.$store.commit('works/SET_CASTLIST',[])
			this.total = ''
			this.page = 1
			//获取铸造列表
			this.getCastList()
			//获取草稿类别
			this.$store.commit('works/SET_DRAFTLIST',[])
			this.getDraftList()
		},
		//上拉加载
		onReachBottom() {
			if(this.castList.length < this.total){
				this.page ++
				this.getCastList()
			}
		},
		methods:{
			goBack(){
				uni.switchTab({
					url:'/pages/tabBars/mine'
				})
			},
			//前往修改草稿箱
			toUpdateWorks(item){
				if(item.type == 1){
					uni.navigateTo({
						url:`/pages/secondary/creation/update?work_id=${item.id}&name=${item.name}&file=${item.file}&category_id=${item.category_id}&album_id=${item.album_id}&category_name=${item.category.name}&album_name=${item.album.name}`
					})
				}else if(item.type == 2){
					uni.navigateTo({
						url:`/pages/secondary/creation/updateAudio?work_id=${item.id}&name=${item.name}&file=${item.file}&category_id=${item.category_id}&album_id=${item.album_id}&category_name=${item.category.name}&album_name=${item.album.name}&cover=${item.cover}`
					})
				}else{
					uni.navigateTo({
						url:`/pages/secondary/creation/updateVideo?work_id=${item.id}&name=${item.name}&file=${item.file}&category_id=${item.category_id}&album_id=${item.album_id}&category_name=${item.category.name}&album_name=${item.album.name}&cover=${item.cover}`
					})
				}
			},
			//关闭搜索图层，判断搜索关键字是否改变，如果改变则清空列表并请求接口
			popClose(val){
				if((this.keyword !== this.searchKeyword )|| val == 1){
					this.popShow = false
					this.page = 1
					this.total = ''
					this.$store.commit('works/SET_CASTLIST',[])
					this.getCastList()
				}
			},
			//重置
			reSet(){
				this.keyword = ''
			},
			//获取铸造列表
			getCastList(){
				this.moreShow = true
				this.status = 'loading'
				this.$store.dispatch('works/work',{status:1,name:this.keyword,page:this.page}).then(res=>{
					uni.stopPullDownRefresh()
					this.searchKeyword = this.keyword
					this.total = res.data.total
					if(this.castList.length == this.total && this.castList.length > 5){
						this.status = 'nomore'
					}else{
						this.moreShow = false
					}
				}).catch(error=>{
					this.moreShow = false
				})
			},
			//获取草稿列表
			getDraftList(){
				this.$store.dispatch('works/work',{status:0}).then(res=>{
					uni.stopPullDownRefresh()
				})
			},
			//添加专辑
			addAlbum(){
				if(this.albumName == ''){
					return uni.$u.toast('请输入专辑名称')
				}
				this.addLoaing = true
				this.$store.dispatch('user/albumStore',{name:this.albumName}).then(res=>{
					this.popAddAlbumShow = false
					this.addLoaing = false
					uni.$u.toast('添加成功')
					this.getAlbumList()
				}).catch(error=>{
					this.addLoaing = false
				})
			},
			//专辑列表
			getAlbumList(){
				this.$store.dispatch('user/userAlbum').then(res=>{
					uni.stopPullDownRefresh()
				})
			},
			end(){
				if(this.albumList.length > 5){
					setTimeout( ()=> this.isLeft = true , 200)
					if(this.isLeft){
						this.toAll()
					}
				}
			},
			scroll(e) {
				this.old_left = e.detail.scrollLeft
			},
			//全部专辑
			toAll(){
				uni.navigateTo({
					url:'/pages/secondary/creation/all-album'
				})
			},
			//前往草稿箱
			toDraft(){
				uni.navigateTo({
					url:'/pages/secondary/creation/draft'
				})
			},
			//创建作品
			toCreation(){
				uni.navigateTo({
					url:'/pages/secondary/creation/creation'
				})
			},
			//创建音频
			toCreationAudio(){
				uni.navigateTo({
					url:'/pages/secondary/creation/creationAudio'
				})
			},
			//创建视频
			toCreationVideo(){
				uni.navigateTo({
					url:'/pages/secondary/creation/creationVideo'
				})
			},
			//前往藏品详情
			toDetail(item){
				uni.navigateTo({
					url:`/pages/secondary/collection/index?work_id=${item.id}`
				})
			},
			//前往专辑详情
			toAlbum(item){
				uni.navigateTo({
					url:`/pages/secondary/creation/album?name=${item.name}&id=${item.id}&user_id=${item.user_id}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.creation-list {
		height: 152upx;
		padding-left: 30upx;
		background: #ffffff;
	
		.creation-title-list {
			background: linear-gradient(133deg, rgba(248, 249, 251, .9) 0%, rgba(245, 246, 249, .9) 100%);
			width: 244upx !important;
			height: 82upx;
			border-radius: 8upx;
			padding: 0 24upx;
			box-sizing: border-box;
			margin-right: 24upx;
			
			.creation-lable {
				width: 28upx;
				height: 28upx;
				
				image {
					width: 28upx;
					height: 28upx;
					vertical-align: top;
				}
			}
	
			.creation-name {
				width: 140upx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				margin: 0 11upx;
			}
	
			.arrow-right {
				width: 18upx;
				height: 18upx;
	
				image {
					width: 18upx;
					height: 18upx;
					vertical-align: top;
				}
			}
		}
	
		.all-box {
			height: 80upx;
			padding-right: 30upx;
			display: inline-block;
	
			.all-icon {
				width: 16upx;
				height: 16upx;
				margin-right: 10upx;
	
				image {
					width: 16upx;
					height: 16upx;
					vertical-align: top;
				}
			}
	
			.all-text {
				writing-mode: tb-rl;
			}
		}
		.paddingL{
				padding-right: 80upx;
		}
	}
	.padding-wrap {
		width: 100%;
		padding: 0 30upx;
		box-sizing: border-box;
	}
	.draft-title{
		padding-top: 20upx;
		padding-bottom: 30upx;
		
	}
	.more-arrow{
		width: 28upx;
		height: 28upx;
		margin-left: 8upx;
		image{
			width: 28upx;
			height: 28upx;
		}
	}
	.filter-icon{
		width: 32upx;
		height: 32upx;
		image{
			width: 32upx;
			height: 32upx;
		}
	}
	.draft-add{
		width: 246upx !important;
		height: 246upx;
		background: #F8F9FB;
		border-radius: 10upx;
		border: 1upx dashed #D8D9E1;
		margin-right: 16upx;
		.draft-create{
			width: 44upx;
			height: 44upx;
			margin:70upx auto 18upx;
			image{
				width: 44upx;
				height: 44upx;
			}
		}
	}
	
	.draft-list{
		height: 246upx;
		padding-left: 30upx;
		background: #ffffff;
		margin-bottom: 26upx;
		.draft-img{
			width: 246upx;
			height: 246upx;
			background: #FFFFFF;
			border-radius: 10upx;
			margin-right:16upx;
			image{
				width: 246upx;
				height: 246upx;
				border-radius: 10upx;
			}
		}
	}
	.creation-box{
		flex-wrap: wrap;
		.creation-item{
			width: 337upx;
			height: 420upx;
			background: #FFFFFF;
			box-shadow: 0px 4upx 30upx -12upx rgba(102,105,120,0.2), 0px 4upx 12upx -6upx rgba(154,166,219,0.1);
			border-radius: 10upx;
			margin-bottom: 10upx;
			overflow: hidden;
			.creation-cover{
				width: 337upx;
				height: 337upx;
				image{
					width: 337upx;
					height: 337upx;
				}
			}
			.creation-quantity{
				display: inline-block;
				height: 36upx;
				padding: 0 12upx;
				background: rgba(41,41,64,0.5);
				border-radius: 24upx 0px 0px 0px;
				bottom: 0;
				right:0;
			}
			.creation-item-title{
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				padding: 0 10upx;
				box-sizing: border-box;
				line-height: 83upx;
			}
		}
	}
	.scr-main {
		width: 690upx;
		background-color: #FFFFFF;
		box-sizing: border-box;
		transition: 0.3s;
		padding: 40upx 30upx 30upx 30upx;
		overflow: hidden;
		border-radius: 0 0 16upx 16upx;
	
		.title {
			padding: 20upx 0 29upx 0;
		}
	
		.document-item {
			display: inline-block;
			min-width: 200upx;
			height: 64upx;
			line-height: 64upx;
			border-radius: 6upx;
			border: 2upx solid #DEE2E6;
			text-align: center;
			margin-bottom: 28upx;
		}
	
		.ipt-box {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			box-sizing: border-box;
			margin-bottom: 50upx;
	
			button {
				width: 290upx;
				height: 80upx;
				background: #E9ECEF;
				border-radius: 8upx;
				font-size: 28upx;
				color: #7B809A;
				text-align: center;
				line-height: 80upx;
				border: none !important;
			}
			.search{
				background-color: #292940;
				color: #ffffff;
			}
		}
	}
	.album-box{
		width: 640upx;
		background: #FFFFFF;
		padding: 50upx 45upx 60upx 45upx;
		.title{
			color: #292940;
			font-size: 36upx;
			text-align: center;
			font-weight: 500;
		}
		.item {
			width: 100%;
			height: 182upx;
			box-sizing: border-box;
			padding-top: 50upx;
			border-bottom: 1upx solid #D8DEE4;
			position: relative;
			margin-bottom: 60upx;
			color: #292940;
			font-size: 36upx;
			.input-box {
				width: 100%;
				margin-top: 10upx !important;
				font-size: 40upx !important;
			}
		}
		.add-btn{
			width: 544upx;
			height: 98upx;
			background: #292940 !important;
			border-radius: 49upx;
			color: #FFFFFF;
			font-size: 36upx;
			text-align: center;
		}
	}
	.no-works{
		margin: 50upx auto;
		text-align: center;
		image{
			width: 300upx;
			height: 300upx;
		}
	}
	.add-work{
		width: 100vw;
		min-height: 100vh;
		overflow: hidden;
		text-align: center;
		position: relative;
		view{
			width: 630upx;
			height: 221upx;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			display: flex;
			align-items: center;
			justify-content: center;
			color: #292940;
			font-size: 36upx;
			font-weight: 500;
		}
		.up-img{
			background: url('/static/creation/up-img-bg.png') no-repeat;
			background-size: cover;
			bottom: 900upx;
		}
		.up-audio{
			background: url('/static/creation/up-audio-bg.png') no-repeat;
			background-size: cover;
			bottom: 620upx;
		}
		.up-video{
			background: url('/static/creation/up-video-bg.png') no-repeat;
			background-size: cover;
			bottom: 340upx;
		}
		image{
			position: absolute;
			left: 50%;
			transform: rotate(0deg);
			width: 120upx;
			margin-left: -60upx;
			height: 120upx;
			bottom: 100upx;
		}
		.run-img{
			animation: run 0.5s 0.125s ease-in-out;
		}
		@keyframes run {
			from{
				transform: rotate(0deg);
			}
			to{
				transform: rotate(90deg);
			}
		}
	}
	.filter-50{
		transition: 0.25s;
		filter: blur(50px);
	}
	/deep/ .u-mode-center-box{
		background-color: transparent !important;
	}
	/deep/ .u-drawer-bottom{
		background-color: transparent !important;
	}
</style>